<template>
  <div class="shoppingCart">
    <van-nav-bar title="水果商城" />
    <div v-for="(item, index) in list" :key="index">
      <van-swipe-cell>
        <van-card
          :num="item.quantity"
          :price="item.mallPrice + '.00'"
          :desc="item.slogan"
          :title="item.goodsName"
          class="goods-card"
          :thumb="item.goodsImg"
        />
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="deleteData(item)"
          />
        </template>
      </van-swipe-cell>
    </div>
    <van-submit-bar :price="money" button-text="提交订单" @submit="onSubmit">
    </van-submit-bar>
    <div style="height: 55px"></div>
  </div>
</template>
<script>
import { Dialog, Toast } from "vant";
import { fruitssOrderById, fruitssDelOrder } from "../common/Api/index.js";
export default {
  data() {
    return {
      checked: "",
      list: [],
      money: null,
      uId: null,
      form: {
        uid: "",
        distinguish: "购物车",
      },
    };
  },
  mounted() {
    if (!JSON.parse(sessionStorage.getItem("information"))) {
      Dialog.alert({
        title: "提示",
        message: "你还未登陆,请登陆",
      }).then(() => {
        sessionStorage.setItem("active", JSON.stringify("setting"));
        this.$router.go();
      });
    } else {
      this.cartList();
    }
  },
  methods: {
    deleteData(item) {
      Dialog.confirm({
        title: "删除信息",
        message: "是否将该商品购物车移除",
      })
        .then(() => {
          console.log(item);
          fruitssDelOrder(item.oId).then((res) => {
            if (res == "删除成功") {
              this.list = [];
              this.money = null;
              this.cartList();
              Toast.success("删除成功");
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    cartList() {
      this.form.uid = JSON.parse(sessionStorage.getItem("information")).uid;
      fruitssOrderById(this.form).then((res) => {
        res.forEach((item) => {
          this.list.push({
            goodsImg: item.goodsImg,
            slogan: item.insideKey,
            goodsName: item.name,
            mallPrice: item.money,
            quantity: item.quantity,
            price: item.quantity * item.money,
            mId: item.mId,
            oId: item.oId,
          });
        });
        this.list.forEach((item) => {
          this.money += item.price * 100;
        });
      });
    },
    onSubmit() {
      sessionStorage.setItem("purchase", JSON.stringify(this.list));
      this.$router.push("/settlement");
      sessionStorage.setItem("active", JSON.stringify("friends"));
    },
  },
};
</script>
<style lang="scss" scoped>
.van-submit-bar {
  bottom: 50px;
}
.shoppingCart {
  .goods-card {
    margin: 0;
  }

  .delete-button {
    height: 100%;
  }
}
</style>